<html>
<head>
  <title>性能优化(2)-UI渲染优化</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601935 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="602"/>
<h1>性能优化(2)-UI渲染优化</h1>

<div>
<span><div><br/></div><div style="min-width: 100%; position: relative;"><div style="background: url(&quot;https://www.cnblogs.com/skins/codinglife/images/body_bg.png&quot;) 0px 0px repeat-x scroll rgb(240, 238, 245); text-size-adjust: none;"><div style="background: none; overflow: visible; text-overflow: ellipsis; word-break: break-all;"><div style="background: rgb(255, 255, 255); overflow: hidden;"><div style="word-break: break-word;"><h1 style="padding: 0px; margin: 10px 0px 20px;"><span style="font-size: 20pt;"><b>性能优化(2)-UI渲染优化</b></span><br/></h1><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8; font-weight: bold;">本篇文章是码牛学院经网上整理收集给大家的性能优化全集，希望能帮助到各位同学</span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">       主要记录一些工作中常用的UI渲染性能优化及调试方法，理解这些方法对于我们编写高质量代码也是有一些帮助的，主要内容包括介绍CPU,GPU的职责，UI的overdraw，Hierarchy View工具的使用以及canvas.clipRect()方法防止View的重叠绘制，都是一些老生常谈的玩意，只是为了自己记录一下才写出来，如果您已经掌握，直接跳过就可以了。</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">一、CPU,GPU的职责介绍  </span></strong></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">对于大多数手机的屏幕刷新频率是60hz，也就是如果在1000/60=16.67ms内没有把这一帧的任务执行完毕，就会发生丢帧的现象，丢帧是造成界面卡顿的直接原因，渲染操作通常依赖于两个核心组件：CPU与GPU。CPU负责包括Measure，Layout等计算操作，GPU负责Rasterization(栅格化)操作(所谓栅格化就是将矢量图形转换为位图的过程，手机上显示是按照一个个像素来显示的，栅格化再普通一些的说法就是将一个Button,TextView等组件拆分到一个个像素上去显示)。</span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">UI渲染优化的目的就是减轻CPU,GPU的压力，除去不必要的操作，保证每帧16ms以内处理完所有的CPU与GPU的计算，绘制，渲染等等操作，使UI顺滑，流畅的展示出来。</span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">二、查找Overdraw</span></strong></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">Overdraw(过度绘制)描述的是屏幕上的某个像素在同一帧的时间内被绘制了多次。在重叠的UI布局中，如果不可见的UI也在做绘制的操作或者后一个控件将前一个控件遮挡，会导致某些像素区域被绘制了多次，从而增加了CPU,GPU的压力。</span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">那么我们找出布局中Overdraw的地方呢？很简单，一般手机里面开发者选项都有调试</span><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 宋体; font-weight: bold; line-height: 1.8;">GPU过度绘制</span><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">的开关，打开即可。</span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">以小米4手机为例，依次找到</span><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(255, 0, 0); font-family: 宋体; line-height: 1.8;">设置-&gt;更多设置-&gt;开发者选项-&gt;调试GPU过度绘制开关</span><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">，打开就可以了。</span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">打开</span><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">调试GPU过度绘制开关</span></span></span></span></span></span><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">之后，再次回到自己开发的应用发现界面怎么多了一些花花绿绿的玩意，没错，不同的颜色代表过度绘制的程度，具体如下表：</span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;"><img src="性能优化(2)-UI渲染优化_files/794139-20180420104948203-194071555.png" type="image/png" data-filename="794139-20180420104948203-194071555.png" height="343" style="margin:0px;padding:0px;border:none;height:auto;max-width:100%;display:block;margin-left:auto;margin-right:auto;" width="310"/></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">蓝色</span></span></span></span></span></span><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">，淡绿，淡红</span></span></span></span></span></span><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">，深红代表了4种不同程度的Overdraw情况，1x,2x,3x,4x分别表示同一像素上<span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">同一帧的时间内被绘制了多次，1x就表示一次最理想情况，4x表示4次最差的情况，我们要做的就是尽量减少3x,4x的情况出现。</span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">下面我们以一个简单demo来进一步说明一下，比如我们开发好一个界面，如下：</span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><div><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;PingFang SC&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 1.8;"><img src="性能优化(2)-UI渲染优化_files/794139-20180426174522016-785166152.jpg" type="image/jpeg" data-filename="794139-20180426174522016-785166152.jpg" height="429" style="margin:0px;padding:0px;border:none;height:auto;max-width:100%;display:block;margin-left:auto;margin-right:auto;" width="241"/></span></div><div><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">很简单的功能，功能做完了，我们看看能不能做下优化呢？打开OverDraw功能，再次查看界面，如下;</span></div></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;"><img src="性能优化(2)-UI渲染优化_files/794139-20180426175106185-12883163.jpg" type="image/jpeg" data-filename="794139-20180426175106185-12883163.jpg" height="432" style="margin:0px;padding:0px;border:none;height:auto;max-width:100%;display:block;margin-left:auto;margin-right:auto;" width="244"/></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">咦？怎么大部分都是浅绿色呢？也就是说</span><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">同一像素上<span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">同一帧的时间内被绘制了2次，这是怎么回事？这时我们需要看下UI布局了，看哪些地方可以优化一下。</span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">主界面布局如下：</span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 12px; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); overflow: auto; padding: 5px; margin: 5px 0px;"><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode.gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div><div style="margin: 0px; padding: 0px; overflow-wrap: break-word; white-space: pre-wrap; font-size: 12px;"><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">1</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">2</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">3</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">xmlns:tools=&quot;http://schemas.android.com/tools&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">4</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;match_parent&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">5</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;match_parent&quot;&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">6</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">7</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">ListView</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">8</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:id=&quot;@+id/list_view&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">9</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;match_parent&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">10</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;match_parent&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">11</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:divider=&quot;#F1F1F1&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">12</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:dividerHeight=&quot;1dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">13</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:background=&quot;@android:color/white&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">14</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:scrollbars=&quot;vertical&quot;&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">15</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;/ListView&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">16</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">17</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;/RelativeLayout&gt;</span></div></div><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode [1].gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">ListView每个条目布局如下：</span></div><div style="font-size: 12px; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); overflow: auto; padding: 5px; margin: 5px 0px;"><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode [2].gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div><div style="margin: 0px; padding: 0px; overflow-wrap: break-word; white-space: pre-wrap; font-size: 12px;"><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">1</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">2</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">3</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;match_parent&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">4</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;52dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">5</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:background=&quot;@drawable/ts_account_list_selector&quot;&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">6</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">7</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">TextView</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">8</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:id=&quot;@+id/ts_item_has_login_account&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">9</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;wrap_content&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">10</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;wrap_content&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">11</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_marginLeft=&quot;10dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">12</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_marginTop=&quot;4dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">13</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:gravity=&quot;center&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">14</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:text=&quot;12345678999&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">15</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:textColor=&quot;@android:color/black&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">16</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:textSize=&quot;16sp&quot; /&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">17</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">18</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">LinearLayout</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">19</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;wrap_content&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">20</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;20dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">21</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_alignParentBottom=&quot;true&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">22</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_marginBottom=&quot;3dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">23</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_marginLeft=&quot;10dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">24</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:gravity=&quot;center_vertical&quot; &gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">25</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">26</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">ImageView</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">27</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:id=&quot;@+id/ts_item_time_clock_image&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">28</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;12dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">29</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;12dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">30</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:src=&quot;@mipmap/ts_login_clock&quot; /&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">31</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">32</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">TextView</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">33</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:id=&quot;@+id/ts_item_last_login_time&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">34</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;wrap_content&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">35</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;wrap_content&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">36</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_marginLeft=&quot;5dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">37</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_toRightOf=&quot;@id/ts_item_time_clock_image&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">38</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:text=&quot;上次登录&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">39</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:textColor=&quot;@android:color/darker_gray&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">40</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:textSize=&quot;11sp&quot; /&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">41</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">42</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">TextView</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">43</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:id=&quot;@+id/ts_item_login_time&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">44</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;wrap_content&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">45</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;wrap_content&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">46</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_marginLeft=&quot;5dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">47</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_toRightOf=&quot;@id/ts_item_last_login_time&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">48</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:text=&quot;59分钟前&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">49</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:textColor=&quot;@android:color/darker_gray&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">50</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:textSize=&quot;11sp&quot; /&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">51</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;/LinearLayout&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">52</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">53</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">TextView</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">54</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:id=&quot;@+id/ts_item_always_account_image_tips&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">55</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;wrap_content&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">56</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;13dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">57</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_alignParentRight=&quot;true&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">58</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_marginTop=&quot;2dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">59</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:background=&quot;@mipmap/ts_always_account_bg&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">60</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:gravity=&quot;center&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">61</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:text=&quot;常用&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">62</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:textColor=&quot;@android:color/white&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">63</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:textSize=&quot;9sp&quot; /&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">64</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">65</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">ImageView</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">66</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:id=&quot;@+id/ts_item_delete_account_image&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">67</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_width=&quot;12dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">68</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_height=&quot;12dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">69</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_alignParentRight=&quot;true&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">70</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_marginTop=&quot;2dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">71</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_marginRight=&quot;13dp&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">72</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:layout_centerVertical=&quot;true&quot;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">73</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">android:src=&quot;@mipmap/ts_close&quot; /&gt;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">74</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">75</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">&lt;/RelativeLayout&gt;</span></div></div><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode [3].gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">发现哪里的问题了吗？这里我就直接说了，问题在于ListView多余设置了背景：<span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">android:background=&quot;@android:color/white&quot;，设置此背景对于我们这个需求根本就没有用，显示不出来并且增加GPU额外压力，去掉ListView背景之后再次观察如下：</span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;PingFang SC&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 1.8;"> </span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;"><img src="性能优化(2)-UI渲染优化_files/794139-20180427104105612-986672707.jpg" type="image/jpeg" data-filename="794139-20180427104105612-986672707.jpg" height="471" style="margin:0px;padding:0px;border:none;height:auto;max-width:100%;display:block;margin-left:auto;margin-right:auto;" width="266"/></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">渲染性能提升了一个档次，在实际工作中情况会复杂很多，为了实现一个效果会不得不牺牲性能，这就需要自己团队权衡了，好了OverDraw到此为止。</span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">三、<span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">clipRect来解决自定义View的OverDraw</span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">我们平时写自定义View的时候有时会重写onDraw方法，但是Android系统是无法检测onDraw里面具体会执行什么操作，从而系统无法为我们做一些优化。这样对编程人员要求就高了，如果我们自己写的View有大量重叠的地方就造成了CPU,GPU资源的浪费，但是我们可以通过canvas.clipRect()来帮助系统识别那些可见的区域。这个方法可以指定一块矩形区域，只有在这个区域内才会被绘制，其他的区域会被忽视，下面我们通过谷歌提供的一个小demo进一步说明。实现效果如下：</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;"><img src="性能优化(2)-UI渲染优化_files/794139-20180427134333601-937366791.png" type="image/png" data-filename="794139-20180427134333601-937366791.png" height="180" style="margin:0px;padding:0px;border:none;height:auto;max-width:100%;display:block;margin-left:auto;margin-right:auto;" width="298"/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">主要就是卡片重叠效果，优化前代码实现如下：</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">DroidCard类封装要绘制的一个个卡片的信息：</span></div><div style="font-size: 12px; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); overflow: auto; padding: 5px; margin: 5px 0px;"><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode [4].gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div><div style="margin: 0px; padding: 0px; overflow-wrap: break-word; white-space: pre-wrap; font-size: 12px;"><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">1</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">class</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCard {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">2</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">3</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">x;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">//</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">左侧绘制起点</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">4</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">width;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">5</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">height;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">6</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">Bitmap bitmap;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">7</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">8</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">DroidCard(Resources res,</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">resId,</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">x){</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">9</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">this</span><span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">.bitmap =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">BitmapFactory.decodeResource(res,resId);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">10</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">this</span><span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">.x =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">x;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">11</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">this</span><span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">.width =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">this</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">.bitmap.getWidth();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">12</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">this</span><span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">.height =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">this</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">.bitmap.getHeight();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">13</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">14</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">}</span></div></div><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode [5].gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div></div><div style="font-size: 14px; white-space: pre-wrap; overflow-wrap: break-word; margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">DroidCardsView为真正的自定义View:</span></div><div style="font-size: 12px; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); overflow: auto; padding: 5px; margin: 5px 0px;"><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode [6].gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div><div style="margin: 0px; padding: 0px; overflow-wrap: break-word; white-space: pre-wrap; font-size: 12px;"><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">1</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">class</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">DroidCardsView</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">extends</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">View {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">2</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">//</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">图片与图片之间的间距</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">3</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mCardSpacing = 150</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">4</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">//</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">图片与左侧距离的记录</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">5</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mCardLeft = 10</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">6</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">7</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">List&lt;DroidCard&gt; mDroidCards =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">ArrayList&lt;DroidCard&gt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">8</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">9</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">Paint paint =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">Paint();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">10</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">11</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCardsView(Context context) {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">12</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">super</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">(context);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">13</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">initCards();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">14</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">15</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">16</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCardsView(Context context, AttributeSet attrs) {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">17</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">super</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">(context, attrs);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">18</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">initCards();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">19</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">20</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">/**</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">21</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">* 初始化卡片集合</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">22</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*/</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">23</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">protected</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">void</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">initCards(){</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">24</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">Resources res =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">getResources();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">25</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mDroidCards.add(</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCard(res,R.drawable.alex,mCardLeft));</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">26</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">27</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mCardLeft+=</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">mCardSpacing;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">28</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mDroidCards.add(</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCard(res,R.drawable.claire,mCardLeft));</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">29</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">30</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mCardLeft+=</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">mCardSpacing;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">31</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mDroidCards.add(</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCard(res,R.drawable.kathryn,mCardLeft));</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">32</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">33</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">34</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">@Override</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">35</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">protected</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">void</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">onDraw(Canvas canvas) {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">36</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">super</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">.onDraw(canvas);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">37</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">for</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">(DroidCard c : mDroidCards){</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">38</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">drawDroidCard(canvas, c);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">39</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">40</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">invalidate();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">41</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">42</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">43</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">/**</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">44</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">* 绘制DroidCard</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">45</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*/</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">46</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">void</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">drawDroidCard(Canvas canvas, DroidCard c) {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">47</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">canvas.drawBitmap(c.bitmap,c.x,0f,paint);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">48</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">49</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">}</span></div></div><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode [7].gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">代码不是本篇重点，不过也不难，自行查看就可以了。我们打开overdraw开关，效果如下：</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;"><img src="性能优化(2)-UI渲染优化_files/794139-20180427135142525-619373111.png" type="image/png" data-filename="794139-20180427135142525-619373111.png" height="190" style="margin:0px;padding:0px;border:none;height:auto;max-width:100%;display:block;margin-left:auto;margin-right:auto;" width="341"/></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">淡红色区域明显被绘制了三次（三张图片重合的地方），其实下面的图片完全没必要完全绘制，只需要绘制三分之一即可，接下来我们就需要对其优化，保证最下面两张图片只需要回执其三分之一最上面图片完全绘制出来就可。</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">DroidCardsView代码优化为：</span></div><div style="font-size: 12px; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); overflow: auto; padding: 5px; margin: 5px 0px;"><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode [8].gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div><div style="margin: 0px; padding: 0px; overflow-wrap: break-word; white-space: pre-wrap; font-size: 12px;"><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">1</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">class</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">DroidCardsView</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">extends</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">View {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">2</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">3</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">//</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">图片与图片之间的间距</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">4</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mCardSpacing = 150</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">5</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">//</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">图片与左侧距离的记录</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">6</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mCardLeft = 10</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">7</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">8</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">List&lt;DroidCard&gt; mDroidCards =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">ArrayList&lt;DroidCard&gt;</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">9</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">10</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">Paint paint =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">Paint();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">11</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">12</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCardsView(Context context) {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">13</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">super</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">(context);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">14</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">initCards();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">15</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">16</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">17</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">public</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCardsView(Context context, AttributeSet attrs) {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">18</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">super</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">(context, attrs);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">19</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">initCards();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">20</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">21</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">/**</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">22</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">* 初始化卡片集合</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">23</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*/</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">24</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">protected</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">void</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">initCards(){</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">25</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">Resources res =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">getResources();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">26</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mDroidCards.add(</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCard(res, R.drawable.alex,mCardLeft));</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">27</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">28</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mCardLeft+=</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">mCardSpacing;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">29</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mDroidCards.add(</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCard(res, R.drawable.claire,mCardLeft));</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">30</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">31</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mCardLeft+=</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">mCardSpacing;</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">32</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">mDroidCards.add(</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">new</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">DroidCard(res, R.drawable.kathryn,mCardLeft));</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">33</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">34</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">35</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">@Override</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">36</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">protected</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">void</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">onDraw(Canvas canvas) {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">37</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">super</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">.onDraw(canvas);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">38</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">for</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">(</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">i = 0; i &lt; mDroidCards.size() - 1; i++</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">){</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">39</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">drawDroidCard(canvas, mDroidCards,i);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">40</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">41</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">drawLastDroidCard(canvas,mDroidCards.get(mDroidCards.size()-1</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">));</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">42</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">invalidate();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">43</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">44</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">45</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">/**</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">46</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">* 绘制最后一个DroidCard</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">47</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(128, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">@param</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">canvas</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">48</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(128, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">@param</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">c</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">49</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*/</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">50</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">void</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">drawLastDroidCard(Canvas canvas,DroidCard c) {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">51</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">canvas.drawBitmap(c.bitmap,c.x,0f,paint);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">52</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">53</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">54</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">/**</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">55</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">* 绘制DroidCard</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">56</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(128, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">@param</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">canvas</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">57</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(128, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">@param</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">mDroidCards</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">58</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(128, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">@param</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">i</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">59</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">*/</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">60</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">private</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">void</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">drawDroidCard(Canvas canvas,List&lt;DroidCard&gt; mDroidCards,</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">int</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">i) {</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">61</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">DroidCard c =</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">mDroidCards.get(i);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">62</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">canvas.save();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">63</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">canvas.clipRect((</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">float</span><span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">)c.x,0f,(</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">float</span><span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">)(mDroidCards.get(i+1).x),(</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; line-height: 1.5;">float</span><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">)c.height);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">64</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">canvas.drawBitmap(c.bitmap,c.x,0f,paint);</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">65</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">canvas.restore();</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">66</span> <span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5;">}</span></div><div><span style="margin: 0px; padding: 0px; font-size: 12px; color: rgb(0, 128, 128); font-family: &quot;Courier New&quot;; line-height: 1.5;">67</span> <span style="font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.8;">}</span></div></div><div style="margin:0px;padding:0px;background-color:rgb(245, 245, 245);margin-top:5px;"><span style="margin: 0px; padding: 0px 5px 0px 0px; font-size: 12px;"><a href="http://loadhtml/#" style="margin: 0px; padding: 0px; background-color: rgb(245, 245, 245); border: none; font-size: 12px; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; line-height: 1.5; text-decoration: underline;" title="复制代码"><img src="性能优化(2)-UI渲染优化_files/copycode [9].gif" type="image/gif" data-filename="copycode.gif" height="20" style="margin:0px;padding:0px;height:auto;background-color:rgb(245, 245, 245);border:none;max-width:100%;" width="20"/></a></span></div></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">主要就是使用Canvas的clipRect方法，绘制之前裁剪出一个区域，这样绘制的时候只在这区域内绘制，超出部分不会绘制出来。</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">重新执行程序，效果如下：</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;"><img src="性能优化(2)-UI渲染优化_files/794139-20180427140830588-1561624230.png" type="image/png" data-filename="794139-20180427140830588-1561624230.png" height="176" style="margin:0px;padding:0px;border:none;height:auto;max-width:100%;display:block;margin-left:auto;margin-right:auto;" width="337"/></span><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">处理后性能就提升了一丝丝</span><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: &quot;PingFang SC&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 1.8;">，</span><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">此外我们还可以使用canvas.quickReject方法来判断是否没和某个矩形相交，从而跳过那些非矩形区域内的绘制操作。</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">四、<span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">Hierarchy Viewer的使用</span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">Hierarchy Viewer可以很直观的呈现布局的层次关系。我们可以通过红，黄，绿三种不同的颜色来区分布局的<span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">Measure，Layout，Executive的相对性能表现如何，</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">提升布局性能的关键点是尽量保持布局层级的扁平化，避免出现重复的嵌套布局。如果我们写的布局层级比较深会严重增加CPU的负担，造成性能的严重卡顿，关于</span><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">Hierarchy Viewer</span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">的使用举例这里就不列举了，我觉得大部分安卓开发人员都会使用了，不知道为什么我这电脑</span><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">Hierarchy Viewer</span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><span style="font-size: 18px; margin: 0px; padding: 0px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">工具突然出问题了，紧急抢救中。。。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">五、<span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><strong style="margin:0px;padding:0px;"><span style="margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">内存抖动现象</span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">在我们优化过view的树形结构和overdraw之后，可能还是感觉自己的app有卡顿和丢帧，或者滑动慢：卡顿还是存在。这时我们就要查看一下是否存在内存抖动情况了</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">Android有自动管理内存的机制，但是对内存的不恰当使用仍然容易引起严重的性能问题。在同一帧里面创建过多的对象是件需要特别引起注意的事情，在同一帧</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">里创建大量对象可能引起GC的不停操作，执行GC操作的时候，所有线程的任何操作都会需要暂停，直到GC操作完成。大量不停的GC操作则会显著占用帧间隔时间。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;">如果在帧间隔时间里面做了过多的GC操作，那么自然其他类似计算，渲染等操作的可用时间就变得少了，严重时可能引起卡顿：</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; font-size: 18px;"><span style="margin:0px;padding:0px;font-size:18px;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(0, 0, 0); font-family: 宋体; line-height: 1.8;"><img src="性能优化(2)-UI渲染优化_files/794139-20180427152217272-597281776.png" type="image/png" data-filename="794139-20180427152217272-597281776.png" height="260" style="margin:0px;padding:0px;border:none;height:auto;max-width:100%;display:block;margin-left:auto;margin-right:auto;" width="425"/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">导致GC频繁操作有两个主要原因：</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">一是内存抖动，所谓内存抖动就是短时间产生大量对象又在短时间内马上释放。</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">二是短时间产生大量对象超出阈值，内存不够，同样会触发GC操作。</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">观察内存抖动我们可以借助android studio中的工具，3.0以前可以使用android monitor,3.0以后被替换为android Profiler。</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">如果工具里面查看到短时间发生了多次内存的涨跌，这意味着很有可能发生了内存抖动，如图：</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;"><img src="性能优化(2)-UI渲染优化_files/794139-20180427153938668-1405877845.png" type="image/png" data-filename="794139-20180427153938668-1405877845.png" height="413" style="margin:0px;padding:0px;border:none;height:auto;max-width:100%;display:block;margin-left:auto;margin-right:auto;" width="464"/></span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">为了避免发生内存抖动，我们需要避免在for循环里面分配对象占用内存，需要尝试把对象的创建移到循环体之外，自定义View中的onDraw方法也需要引起注意，每次屏幕发生绘制以及动画执行过程中，onDraw方法都会被调用到，避免在onDraw方法里面执行复杂的操作，避免创建对象。对于那些无法避免需要创建对象的情况，我们可以考虑对象池模型，通过对象池来解决频繁创建与销毁的问题，但是这里需要注意结束使用之后，需要手动释放对象池中的对象。</span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">好了，关于UI渲染性能优化介绍到此为止， </span></div><div style="font-size: 14px; padding: 0px; text-indent: 0px; margin: 10px auto;"><span style="margin: 0px; padding: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: 宋体; line-height: 1.8;">码牛学院 用代码码出牛逼的人生！！</span></div></div></div></div></div></div><div><br/></div></span>
</div></body></html> 